<script setup>
import { ref} from "vue";
import { ethers } from "ethers";
import { ElMessage, ElNotification } from 'element-plus'
import { connectWallet, walletConnected, walletAddress } from "../interact/Contract";

const contract = ref(null)


async function connectWalletForLogin() {
  contract.value = await connectWallet();
}
const NftNumber = ref("")
// mint
async function mint(address){
    console.log(`要mint的地址：${address}`)
    try{
        const tx = await contract.value.mint(address)
        ElMessage.success('Mint 成功！');
    }
    catch(error){
        console.error("个人拥有的nft数量已达最大:", error);
        ElMessage.error('个人拥有的nft数量已达最大,不可mint');
    }
}
// 查看nft数量
async function getNftNumber(address){
    console.log(`查看${address}拥有的nft数量`)
    const checksumAddress = ethers.utils.getAddress(address);
    NftNumber.value = await contract.value.getNftNumber(address)
}

</script>

<template>
  <div>
    <button @click="connectWalletForLogin" v-if="!walletConnected">连接钱包</button>
    <p v-if="walletConnected">已连接: {{ walletAddress }}</p>
    <button @click="mint(walletAddress)" >mintNFT</button>
    <button @click="getNftNumber(walletAddress)" >查看nft数量</button>
    <p v-if="walletConnected">该账户的nft数量: {{ NftNumber }}</p>
  </div>
</template>
